import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { modalHeaderDefaultProps } from './defaultProps';
import type { ModalHeaderOptions } from './type';

export interface ModalHeaderProps extends ModalHeaderOptions, HTMLAttributes<HTMLDivElement> {}

const ModalHeader: FC<ModalHeaderProps> = (props) => {
  const { className, ui, centered, basic, children, forwardedRef, ...modalHeaderProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames({ ui, centered, basic }, 'header', className),
      ...modalHeaderProps,
    },
    children,
  );
};

ModalHeader.displayName = 'ModalHeader';
ModalHeader.defaultProps = modalHeaderDefaultProps;

export default ModalHeader;
